import {useNavigate} from 'react-router-dom'
import './index.css'

const Index = (props) => {
    const navigator = useNavigate()
    const toggle=(id)=>{
        navigator(`/detail?id=${id}`)
    }
    return (
        <div>
            {props.data.map(item=>{
                return(
                    <div className="item" key={item._id} onClick={()=>toggle(item._id)}>
                        <div>
                            <img src={item.pic} alt="" />
                        </div>
                        <div>
                            <p>{item.title}</p>
                            <p>观众评分 {item.rating}</p>
                        </div>
                    </div>
                )
            })}
        </div>
    );
}

export default Index;
